<template>
	<view class="content">
		<view class="tabs">
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index,item.value)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<block v-for="(item,index) in oList" :key="index">
				<view class="list-item" @click="goUser(item.id)">
					<view class="head">
						<text class="t1">订单号：{{item.order_sn}}</text>
						<text class="t2">{{setStatus(item.status)}}</text>
					</view>
					<view class="order-user">
						<view class="user tn-flex">
							<view class="user-left">
								<image :src="item.game_img" mode=""></image>
							</view>
							<view class="user-right tn-flex">
								<view class="name">{{item.nickname}}</view>
								<view class="tag">{{item.game_name}}{{item.num}}{{item.unit}}</view>
								<view class="price">
									<text class="p1">{{item.price}}</text>
									<text class="p2">海豚币</text>
								</view>
							</view>
						</view>
						<view class="foot tn-flex">
							<text class="t1" v-if="item.status == 2 || item.status == 4">联系TA</text>
							<view class="btn1" v-if="item.status == 2" @click.stop="beginServe(index,item.id)">开始服务</view>
							<view class="btn2" v-if="item.status == 2" @click.stop="turn(index,item.id)">拒绝接单</view>
							<view class="btn1" v-if="item.status == 4" @click.stop="success(index,item.id)">完成订单</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<w-load-more ref="wLoadMore"></w-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList: [{
						name: '全部',
						value:0
					},
					{
						name: '待服务',
						value:2
					},
					{
						name: '进行中',
						value:4
					},
					{
						name: '已完成',
						value:5
					},
					{
						name: '已拒绝',
						value:3
					}
				],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				status:0,
				page:1,
				oList:[]
			}
		},
		onLoad() {
			this.getList(1)
			uni.$off('updateOrder')
			uni.$on('updateOrder',() =>{
				console.log('更新了')
				this.page = 1
				this.getList()
			})
		},
		onUnload() {
			uni.$off('updateOrder')
		},
		onReachBottom() {
			if(this.oList.length < 20) return
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.getList()
		},
		computed:{
			setStatus(){
				return function(val){
					return val == 1 ? '待付款' : val == 2 ? '待服务' : val == 4 ? '进行中' : val == 3 ? '已拒绝':'已完成'
				}
			}
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)
		},
		methods: {
			async getList(loading){
				try{
					let result = await this.$request({
						loading,
						method:'post',
						url:'/api/play_order/play_order',
						data:{
							status:this.status,
							page:this.page
						}
					})
					let data = result.data.data.data
					console.log(data)
					if(this.page == 1){
						this.oList = data
					}else{
						this.oList = this.oList.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if(data.length == 0){
							this.page--
						}
					}
				}catch(e){
					this.msg(e.data.msg)

				}

			},
			// 开始服务
			async beginServe(index,play_order_id){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_order/start_service',
						data:{
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					console.log(result)
				}catch(e){
					this.msg(e.data.msg)
				}

			},
			// 拒绝服务
			async turn(index,play_order_id){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_order/refuse',
						data:{
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					console.log(result)
				}catch(e){
					this.msg(e.data.msg)
				}

			},
			// 完成订单
			async success(index,play_order_id){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_order/play_finish_order',
						data:{
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					console.log(result)
				}catch(e){
					console.log(e)
					this.msg(e.data.msg)
				}
			},
			tabChange(index,value) {
				this.current = index
				this.left = this.itemNode[index].left
				this.status = value
				this.page = 1
				this.getList(1)
			},
			goUser(id){
				uni.navigateTo({
					url:"/playcenterPage/order-user?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.tabs{
		position: sticky;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		z-index: 10;

	}
	.navTab {
		display: flex;
		align-items: center;
		height: 105rpx;
		position: relative;
		background-color: #ffffff;

		.tab-item {
			width: 150rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}

		.at-tab-item {
			font-size: 36rpx;
			color: $uni-text-color;

		}

		.tab-bottom {
			position: absolute;
			bottom: 12rpx;
			transition: left .2s linear;
			display: flex;
			justify-content: center;

			.xian {
				height: 8rpx;
        background: linear-gradient(90deg, #080808 0%, #080808 100%);
				border-radius: 60rpx;
			}
		}
	}

	.order-list{
		padding: 32rpx;
		.list-item{
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			.head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				padding: 0 24rpx;
				border-bottom: 1px solid #efefef;
				.t1{
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				.t2{
					font-size: 28rpx;
					font-weight: 400;
					color: #333333ad;
				}
			}
			.order-user{
				padding: 24rpx;
				.user{
					.user-left{
						image{
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}
					.user-right{
						padding-left: 24rpx;
						flex-direction: column;
						.name{
							font-size: 30rpx;
							font-weight: bold;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.tag{
							font-size: 26rpx;
							font-weight: 400;
							color: #333333;
							flex: 1;

						}
						.price{
							color: #e83a30;
							.p1{
								font-size: 40rpx;
							}
							.p2{
								font-size: 24rpx;
							}
						}
					}
				}
				.foot{
					align-items: center;
					justify-content: flex-end;
					margin-top: 24rpx;
					.t1{
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
					.btn1{
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: #9D5EF4;
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						line-height: 60rpx;
						margin: 0 24rpx;
					}
					.btn2{
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: rgba(157,94,244,0);
						border: 1px solid #9D5EF4;
						font-size: 28rpx;
						font-weight: 400;
						color: #9D5EF4;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}
		}
		.list-item:last-child{
			margin-bottom: 0;
		}
	}
}
</style>
